<template>
  <div>
    <el-button
      type="text"
      @click="dialogVisible = true"
    >
      详情
    </el-button>
    <el-dialog
      title="干扰任务详情"
      :visible.sync="dialogFormVisible"
      class="tc"
    >
      <!-- 上半部分 -->
      <div>
        <el-row
          :gutter="20"
          class="form"
        >
          <el-col :span="4">
            <div class="grid-content bg-purple">
              根用户：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="input1"
              value="admin"
            />
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              ID：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="input2"
              value="123456"
            />
          </el-col>
        </el-row>
        <el-row
          :gutter="20"
          class="form"
        >
          <el-col :span="4">
            <div class="grid-content bg-purple">
              昵称：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="input3"
              value="秋天柠檬"
            />
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              平台：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="input4"
              value="微博"
            />
          </el-col>
        </el-row>
        <el-row
          :gutter="20"
          class="form"
        >
          <el-col :span="4">
            <div class="grid-content bg-purple">
              抗识别方式
            </div>
          </el-col>
          <el-col :span="20">
            <el-radio
              v-model="radio"
              label="1"
            >
              干扰方式1
            </el-radio>
            <el-radio
              v-model="radio"
              label="2"
            >
              干扰方式2
            </el-radio>
          </el-col>
        </el-row>
      </div>

      <!-- 下半部分表格 -->
      <div>
        <el-table
          ref="multipleTable"
          :data="tableData1"
          tooltip-effect="dark"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            label="昵称"
            prop="nickname"
            width="200"
            sortable
          >
            <template slot-scope="scope">
              {{ scope.row.nickname }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="ID"
            width="200"
            sortable
          />
          <el-table-column
            prop="relation"
            label="关系"
            width="250"
            show-overflow-tooltip
          >
            <el-button>关注</el-button>
            <el-button>粉丝</el-button>
          </el-table-column>
        </el-table>
      </div>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="dialogFormVisible = false"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: "admin",
      input2: "123456",
      input3: "秋天柠檬",
      input4: "微博",
      radio: "1",

      tableData1: [
        {
          nickname: "秋天的树叶",
          id: "46156",
        },
        {
          nickname: "秋天的树叶",
          id: "46156",
        },
        {
          nickname: "秋天的树叶",
          id: "46156",
        },
      ],
      dialogFormVisible: true,
      //   dialogFormVisible: false,
      // form: {
      //   name: "",
      //   region: "",
      //   date1: "",
      //   date2: "",
      //   delivery: false,
      //   type: [],
      //   resource: "",
      //   desc: "",
      // },
  
    };
  },
  methods: {
    handleSelectionChange() {},
    handleSelecti(selection) {
      console.log(selection);
    },
    handleClick() {
      this.dialogFormVisible = true;
    }
  },
};
</script>

<style scoped>
.form {
  margin-bottom: 20px;
}
.dialog-footer {
  text-align: center;
}

.tc {
  width: 80%;
}
</style>